.x-switch {
	--switch-size: $switch-size;
	--switch-color: $switch-background-color;

	uni-switch,
	switch {
		.uni-switch-wrapper,
		.wx-switch-wrapper {
		}
		.uni-switch-input,
		.wx-switch-input {
			position: relative;
			display: inline-block;
			box-sizing: content-box;
			width: $switch-width;
			height: $switch-height;
			font-size: var(--switch-size, $switch-size);
			background-color: var(--switch-color, $switch-background-color);
			border: $switch-border;
			border-radius: $switch-node-size;
			cursor: pointer;
			transition: background-color $switch-transition-duration;
			margin: 0;
			&::before,
			&::after {
				height: 100%;
			}
			&::before {
				width: 100%;
			}
			&::after {
				position: absolute;
				top: 0;
				left: 0;
				z-index: $switch-node-z-index;
				width: $switch-node-size;
				height: $switch-node-size;
				background-color: $switch-node-background-color;
				border-radius: 100%;
				box-shadow: $switch-node-box-shadow;
				transition: transform $switch-transition-duration cubic-bezier(0.3, 1.05, 0.4, 1.05);
			}
			&.uni-switch-input-checked,
			&.wx-switch-input-checked {
				background-color: $switch-on-background-color;
				&::after {
					transform: translateX($switch-width - $switch-node-size);
				}
			}
		}
	}

	&--disabled {
		cursor: not-allowed;
		opacity: $switch-disabled-opacity;
	}
}
